<script setup>
import { onMounted, provide, ref } from "vue";
import { messageListApi } from "@/services/message";
import { onShow, onLoad } from "@dcloudio/uni-app";

onShow(() => {
  form.value.page = 1;
  listData.value = [];
  initDataFun();
});

//顶部tabs
const tabslist = ref([
  {
    name: "全部",
    value: 3,
  },
  {
    name: "系统消息",
    value: 1,
  },
  {
    name: "待办通知",
    value: 2,
  },
]);

// list data
const listData = ref([]);
const type = ref(3);
// 跳转到详情
const toDetail = (item) => {
  uni.navigateTo({
    url: "/pages/message-detail/Index?id=" + item.id,
  });
};

const status = ref("more");
const form = ref({ page: 1, limit: 20 });
// init
const initDataFun = async () => {
  form.value.type = type.value;
  try {
    status.value = "loading";
    let res = await messageListApi(form.value);
    let arr = [];
    arr = res.data.list;
    listData.value = listData.value.concat(arr);
    if (res.data.list.length < form.value.limit) {
      status.value = "no-more";
    } else {
      status.value = "more";
    }
    form.value.page++;
  } catch (error) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

const changefun = (item, index) => {
  type.value = item.value;
  form.value.page = 1;
  listData.value = [];
  initDataFun();
};
</script>

<template>
  <view class="container">
    <view class="tabs-top"
      ><u-tabs
        lineColor="#01ADA8"
        :list="tabslist"
        :activeStyle="{ color: '#01ADA8' }"
        :inactiveStyle="{ color: '#8C8C8C' }"
        :itemStyle="{
          padding: '20rpx 60rpx',
        }"
        @change="changefun"
      ></u-tabs
    ></view>
    <!-- <u-sticky bgColor="#fff">
      
    </u-sticky> -->

    <view class="content" v-show="listData && listData.length > 0">
      <view v-for="(item, index) in listData" :key="index">
        <view class="detail-warp" @click="toDetail(item)">
          <view class="message-info-warp">
            <view class="message-info-warp-left">
              <view class="red-crile" v-if="item.status == 0"></view>
              <image
                :src="
                  item.type == 2
                    ? '../../static/message/agency-icon.png'
                    : '../../static/message/system-icon.png'
                "
                mode="scaleToFill"
              />
              <up-text :lines="1" :text="item.title"></up-text>
            </view>

            <text class="message-title-text"></text>
            <view class="message-right-warp">
              <text class="date-text">{{ item.create_time }}</text>
            </view>
          </view>

          <!-- <uni-badge
            class="uni-badge-left-margin"
            :is-dot="true"
            absolute="rightTop"
            size="small"
          >
            <view>
              <text class="message-text">
                {{ item.content }}
              </text>
            </view>
          </uni-badge> -->
          <view>
            <text class="message-text">
              {{ item.content }}
            </text>
          </view>
          <view class="see-det-hx"></view>
          <view class="see-det">
            <text>查看详情</text>
            <uni-icons
              type="right"
              size="18"
              color="#8C8C8C"
              class="sala-det-more-right"
            ></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <view class="nodate-bt" v-if="listData.length === 0">
      <image src="/static/nodate/datas.png" mode="widthFix"></image>
    </view>

    <uni-load-more color="#c6c5c3" :status="status" />
  </view>
</template>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
